<!--下拉框/搜索框-->
<template>
	<zh-form-item
		:ref="prop"
		:label="label"
		:prop="prop"
		:span="span"
		:md="md"
		:sm="sm"
		:xs="xs"
		:lg="lg"
		:xl="xl"
		:offset="offset"
		:push="push"
		:pull="pull"
		:tag="tag"
	>
		<el-select
			ref="selectRef"
			style="width: 100%"
			v-model="value"
			v-bind="attrs"
			:id="'c' + columnId"
			:name="'c' + columnId"
			:size="mySize"
			:clearable="clearable"
			:disabled="getDisabled()"
			:remote="remote"
			:remote-method="remoteMethod"
      :filterable="true"
			@visible-change="visibleChange"
		>
			<el-option v-for="item in theOptions" :key="item[nodeValue]" :value="item[nodeValue]" :label="item[nodeLabel]">
				<div style="display: flex; justify-content: space-between">
					<span v-for="(showItem, index) in showLabel" :key="index">
						{{ item[showItem] }}
					</span>
				</div>
			</el-option>
		</el-select>
	</zh-form-item>
</template>
<script lang="ts" setup>
import { formItemProps, selectProps, itemProps, itemController, initSelect } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...formItemProps,
	...selectProps,
	...itemProps,
	modelValue: {
		type: [Number, String, Boolean, Array],
		default: '',
  },
  //是否远程
  remote: {
		type: Boolean,
		default: false,
	},
  //是否分页加载
  lazy: {
		type: Boolean,
		default: false,
	}
});
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue', 'visible-change','focus']);
const allAttrs = computed(() => {
	return Object.assign(props.extend, attrs);
});
const { value, globalSize } = itemController(props, allAttrs.value, emit);
const state = reactive({
	mySize: allAttrs.value.size,
	once: false,
});
const { theOptions, nodeLabel, nodeValue, showLabel, remoteMethod, scrollMethod, initSelectMethod } = initSelect(
	props,
	value
);
// 初始化
if (allAttrs.value.multiple && props.remote) {
  initSelectMethod(allAttrs.value.multiple);
}
globalSize(state);
// 输出
const { mySize } = toRefs(state);
const selectRef = ref();
let golbalProps: any = inject('golbalProps', {});
//获取可编辑设置
const getDisabled = () => {
	if (props.disabled === null || props.disabled === undefined) {
		return golbalProps.disabled;
	} else {
		return props.disabled;
	}
};
function visibleChange(val) {
	setTimeout(() => {
		let el = selectRef.value?.$refs.scrollbar.$el;
    if(el){
      const poper = el.querySelector('.el-select-dropdown__wrap');
      if (!state.once && props.lazy) {
        poper.addEventListener('scroll', function () {
          const CONDITION = poper.scrollHeight - poper.scrollTop <= poper.clientHeight + 0.5;
          if (CONDITION) {
            scrollMethod();
          }
        });
        state.once = true;
      }
    }
		
		emit('visible-change',val);
	}, 10);
}
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-form-ele-select',
	inheritallAttrs: false,
};
</script>
<style></style>

<style></style>
